<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="设备品牌" prop="brandId"
                :rules="[
                  { required: true, message: '请选择设备品牌', trigger: 'change' }
                 ]">
              <el-select v-model="inputForm.brandId" @change="handleBrandChange" placeholder="请选择设备品牌" style="width: 100%">
                <el-option
                  v-for="item in brandList"
                  :key="item.id"
                  :label="item.brandName"
                  :value="item.id">
                </el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="型号名称" prop="name"
                :rules="[
                 ]">
              <el-input v-model="inputForm.name" placeholder="请填写型号名称"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="规格参数" prop="spec"
                :rules="[
                 ]">
              <el-input v-model="inputForm.spec" placeholder="请填写规格参数"     ></el-input>
           </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        brandList: [],
        inputForm: {
          id: '',
          brandId: '',
          name: '',
          spec: ''
        }
      }
    },
    components: {
    },
    methods: {
      handleBrandChange (brandId) {
        if (!brandId) return
        this.modelLoading = true
        this.$http({
          url: '/device/equipmentModel/list',
          method: 'get',
          params: {
            brandId: brandId
          }
        }).then(({ data }) => {
          if (data && data.success) {
            this.modelList = data.page.list
          }
        }).finally(() => {
          this.modelLoading = false
        })
      },
      // 获取品牌列表
      getBrandList () {
        this.$http({
          url: '/device/deviceBrand/list',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.brandList = data.page.list
          }
        }).catch(() => {
          this.$message.error('获取品牌列表失败')
        })
      },
      init (method, id, brandId) {
        this.method = method
        this.inputForm.id = id || ''
        this.inputForm.brandId = brandId || ''
        if (method === 'add') {
          this.title = `新建设备型号`
        } else if (method === 'edit') {
          this.title = '修改设备型号'
        } else if (method === 'view') {
          this.title = '查看设备型号'
        }
        this.visible = true
        this.loading = false
        this.getBrandList()
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/device/equipmentModel/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              if (data && data.equipmentModel) {
                // 确保所有表单字段都被正确赋值
                this.inputForm.id = data.equipmentModel.id || ''
                this.inputForm.brandId = data.equipmentModel.brandId || ''
                this.inputForm.name = data.equipmentModel.name || ''
                this.inputForm.spec = data.equipmentModel.spec || ''
              }
              this.loading = false
            }).catch(() => {
              this.loading = false
              this.$message.error('获取数据失败')
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/device/equipmentModel/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>